:root{
    --primary:#1e8be4;
    --secondary:#778899;
    --success:#198754;
    --danger:#dc3545;
    --warning:#ffc107;
    --info:#4b0082;
    --light:#f8f9fa;
    --dark:#212529;
    --link:#0d6efd;
    --primary-hover:#106fbd;
    --secondary-hover:#697683;
    --success-hover:#017201;
    --danger-hover:#b32922;
    --warning-hover:#f3ca27;
    --info-hover:#37025e;
    --light-hover:#c9c0c0;
    --dark-hover:#000000;
    --disable-primary-btn:#77afdd;
    --disable-secondary-btn:#888a8b;
    --bg-color:#333333;
    --btn-icon-color:#ffffff;
    --font-color:#818181;
    --font-family-rubik:@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
    --font-family-roboto:@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap');
}

/* fontImport */

/* body */
body{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    /* font-family: 'Roboto', sans-serif; */
    font-family: 'Rubik', sans-serif;
    background-color: var(--bg-color);
    color:var(--light);
}
.active{
    color:var(--light) !important;
}
.side-bar{
    display: flex;
    flex-direction: column;
    width:20rem;
    height:100%;
    position:fixed;
    top:-1px;
    left:-1px;
    background-color: var(--bg-color);
    overflow: auto;
    box-shadow: 2px 2px 10px yellow;
}
.heading{
    display: flex;    
    justify-content: center;
}
.brand-name h1{
    color:white;
    border-radius: 5px;
    margin-bottom: 0.1rem;
    margin-top: 0.5rem;
    background-image: linear-gradient(rgb(82, 40, 40),rgb(160, 216, 28));
}
.installation a{
    text-decoration: none;
    display: flex;    
    justify-content: center;
    color:var(--font-color);
    margin-bottom: 0.1rem;
    margin-top: 0.5rem;
}
.installation a:hover{
    color:var(--light);
}
.nav-items{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:0rem 0rem 0.7rem 0.4rem;
    /* overflow-x: hidden; */
}
.nav-items a{
    text-decoration: none;
   font-size: 1.5rem;
   /* font-weight: 600; */
   padding:1rem;
   cursor:pointer;
   width: 100%;
   text-align: center;
   color:var(--font-color);
}
.nav-items a:hover{
    color:var(--light);
}
.footer{
    display: flex;
    flex-direction: row;
}
.designed-by{
    
    margin-left: 31px;
    text-align: center;
}
.footer a{
    text-decoration: none;
    font-size: 1rem;
    color:var(--font-color);
    text-align: center;
}
.footer a:hover{
    color:var(--light)
}
.footer .github{
    margin: 0px 10px;
}

/* Content Box */
.content-box{
    height:100%;
    margin-left: 20.5rem;
    display:flex;
    flex-direction:column;  
    flex-wrap: wrap;
    align-items: center;
}

.content-box .intro{
    font-size: 1.24rem;
    text-align: center;
    padding:0.5rem;
    margin:0.5rem;
    width:90%;
    border-radius: 45px;
    box-shadow: 2px 2px 10px yellow;
}
.btn-component-container{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}
/* .content-box .btn-container{
    box-shadow: 2px 2px 10px#fb00ff !important;
} */
.btn-component-container .iframe-section{
    padding-top: 1.1rem !important;
}
.contained-btn-container{
    justify-content: space-evenly i !important;
}

/* index page */
.index-para{
    font-family: var(--font-family-rubik);
    
}
.index-heading{
    font-family: var(--font-family-rubik) im !important;
    
}
.white{
    color:var(--light)
}
.magic{
    color:var(--warning-hover)
}
.index-para2{
    color: var(--secondary);
}
.btn-links{
    text-decoration: none;
    color:white;
}